<template>
  <div class="right_store">
    <cn-title title="物流仓储大数据"></cn-title>
    <div class="store_main">
      <div class="l_store">
        <div class="top_s">
          <div class="left_s">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              企业物流数据
              <span style="width: 56px"></span>
              <div
                v-for="item in ck_tabs1"
                :key="item.value"
                :class="['btn', ck_active1 === item.value ? 'active_btn' : '']"
                @click="ckSlect1(item.value)"
              >
                {{ item.name }}
              </div>
            </div>
            <div id="storeChart1" class="chart_1"></div>
          </div>
          <div class="right_s">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              物流平台数据
              <span style="width: 56px"></span>
              <div
                v-for="item in ck_tabs2"
                :key="item.value"
                :class="['btn', ck_active2 === item.value ? 'active_btn' : '']"
                @click="ckSlect2(item.value)"
              >
                {{ item.name }}
              </div>
            </div>
            <div id="storeChart2" class="chart_2"></div>
          </div>
        </div>
        <div class="bottom_s">
          <div class="title d_a_c">
            <img src="@/assets/img/l_title.png" alt="" />
            产品包装仓储数据
            <span style="width: 360px"></span>
            <div
              v-for="item in ck_tabs3"
              :key="item.value"
              :class="['btn', ck_active3 === item.value ? 'active_btn' : '']"
              @click="ckSlect3(item.value)"
            >
              {{ item.name }}
            </div>
          </div>
          <div id="storeChart3" class="chart_3"></div>
        </div>
      </div>
      <div class="r_store">
        <div class="title d_a_c">
          <img src="@/assets/img/l_title.png" alt="" />
          产品流向分析
          <span style="width: 160px"></span>
        </div>
        <div class="chart_box">
          <div id="storeChart4" class="chart_4"></div>
          <div class="rank_title"><span class="icon">▶</span> 流向前五名</div>
        </div>
        <div class="rank d_a_c">
          <div v-for="(item, index) in ranking" :key="index">
            <img v-if="index == 0" src="@/assets/img/1.png" alt="" />
            <img v-else-if="index == 1" src="@/assets/img/2.png" alt="" />
            <img v-else-if="index == 2" src="@/assets/img/3.png" alt="" />
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import chinaMap from "@/assets/json/map_chart.json";
export default {
  components: {
    CnTitle,
  },
  data() {
    return {
      ck_tabs1: [
        { name: "日", value: "day" },
        { name: "月", value: "month" },
        { name: "年", value: "year" },
      ],
      ck_active1: "day",
      ck_tabs2: [
        { name: "日", value: "day" },
        { name: "月", value: "month" },
        { name: "年", value: "year" },
      ],
      ck_active2: "day",
      ck_tabs3: [
        { name: "日", value: "day" },
        { name: "月", value: "month" },
        { name: "年", value: "year" },
      ],
      ck_active3: "day",
      ranking: [
        { name: "广东" },
        { name: "上海" },
        { name: "浙江" },
        { name: "山西" },
        { name: "山东" },
      ],
    };
  },
  mounted() {
    this.renderStorehouseChart1();
    this.renderStorehouseChart2();
    this.renderStorehouseChart3();
    this.renderStorehouseChart4();
  },
  methods: {
    ckSlect1(value) {
      this.ck_active1 = value;
    },
    ckSlect2(value) {
      this.ck_active2 = value;
    },
    ckSlect3(value) {
      this.ck_active3 = value;
    },
    area(name, color) {
      var a = {
        name: name,
        selected: true,
        label: {
          show: false,
        },
        itemStyle: {
          emphasis: {
            areaColor: "rgba(246,173,4,.5)",
            borderColor: "rgba(246,173,4,1)",
            borderWidth: 1,
          },
        },
      };
      return a;
    },
    renderStorehouseChart1() {
      let myChart = this.$echarts.init(document.getElementById("storeChart1"));
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "12%",
          top: "5%",
          bottom: "18%",
          right: "8%",
        },
        xAxis: {
          data: ["路安物流", "本优物流", "仁元物流", "丰元商贸", "杰通物流"],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#009BFF",
              width: 1,
            },
          },
          axisLabel: {
            color: "#AED0EF",
            fontSize: 12,
            fontFamily: "Bebas",
          },
        },
        yAxis: [
          {
            type: "value",
            min: 0,
            minInterval: 1,
            nameTextStyle: {
              fontSize: 10,
              color: "#074C8B",
              padding: [0, 24, 4, 0],
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
            },
            splitArea: { show: false },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              color: "#AED0EF",
              fontFamily: "Bebas",
            },
            splitNumber: 4,
          },
        ],
        dataZoom: [],
        series: [
          {
            type: "pictorialBar",
            barCategoryGap: "20px",
            symbol:
              "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(244,175,7, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(244,175,7, 0.11)",
                  },
                ]),
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [21, 34, 21, 12, 34],
            z: 10,
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderStorehouseChart2() {
      let myChart = this.$echarts.init(document.getElementById("storeChart2"));
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#009BFF"],
        grid: {
          left: "2%",
          right: "4%",
          bottom: "5%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.45)",
            },
          },
          axisLabel: {
            // interval:0,
            fontSize: 11,
            color: "#BAE7FF",
          },
          axisTick: {
            show: false,
          },
          data: ["顺丰", "京东", "中通", "韵达", "EMS", "圆通"],
        },
        yAxis: {
          type: "value",
          min: 0,
          minInterval: 1,
          nameTextStyle: {
            fontSize: 12,
            color: "#BAE7FF",
            align: "center",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              // type: 'dashed', // dotted 虚线
            },
          },
          splitNumber: 4,
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            fontFamily: "Bebas",
            color: "#AED0EF",
          },
        },
        series: [
          {
            type: "line",
            // showSymbol: false,
            smooth: true,
            data: [10, 20, 9, 30, 10, 19], // 纵坐标数据
            areaStyle: {
              //区域填充样式
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,155,255,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,155,255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderStorehouseChart3() {
      let myChart = this.$echarts.init(document.getElementById("storeChart3"));
      let option = {
        grid: {
          // 当图表长度或者宽度被压缩了，设置grid即可
          left: "5%",
          right: "20%",
          bottom: "0%",
          top: "25%",
          containLabel: true,
        },
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          top: "20%",
          right: "5%",
          data: ["包装数量", "存储数量"],
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            fontSize: 10,
            color: "#AED0EF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["路安物流", "本优物流", "仁元物流", "丰元商贸", "杰通物流"],
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "#074C8B",
              fontSize: 10,
              align: "right",
            },
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 3,
          },
        ],
        series: [
          {
            name: "包装数量",
            type: "bar",
            barGap: 0,
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [33, 33, 33, 33, 33],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#000C34",
                    offset: 0,
                  },
                  {
                    color: "#03B8FC",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "存储数量",
            type: "bar",
            barWidth: 8,
            emphasis: {
              focus: "series",
            },
            data: [18, 18, 18, 18, 18],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#091149",
                    offset: 0,
                  },
                  {
                    color: "#F1A905",
                    offset: 1,
                  },
                ],
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderStorehouseChart4() {
      let myChart = this.$echarts.init(document.getElementById("storeChart4"));

      var geoCoordMap = {
        山西: [112.56938, 37.87983],
        新疆: [89.1973, 42.95698],
        霍林郭勒: [119.67046, 45.53751],
        西藏: [91.12434, 29.65289],
        云南: [102.71642, 25.05156],
        广东: [113.27243, 23.13795],
        新疆玛纳斯基地: [86.22, 44.3],
        九江: [116.0, 29.7],
        新乡: [116.402217, 35.311657],
        若羌县: [88.17, 39.02],
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        浙江: [120.5313, 29.0773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028],
      };
      var GZData = [
        [
          {
            name: "山西",
          },
          {
            name: "山西",
            value: 10,
          },
        ],
        [
          {
            name: "山西",
          },
          {
            name: "新疆",
            value: 90,
          },
        ],
        [
          {
            name: "山西",
          },
          {
            name: "霍林郭勒",
            value: 40,
          },
        ],
        [
          {
            name: "山西",
          },
          {
            name: "西藏",
            value: 80,
          },
        ],
        [
          {
            name: "山西",
          },
          {
            name: "云南",
            value: 95,
          },
        ],
        [
          {
            name: "山西",
          },
          {
            name: "广东",
            value: 120,
          },
        ],
      ];
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };
      var color = ["#f5b400", "#2ff83f", "#0ff"];
      var series = [];
      [["数据流向", GZData]].forEach(function (item, i) {
        series.push(
          {
            name: item[0],
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.5,
              color: "#fff",
              symbolSize: 1,
              borderColor: color[i],
              borderWidth: 4,
              shadowBlur: 2,
              shadowColor: color[i],
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              delay: function () {
                return Math.random() * 5000;
              },
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                curveness: -0.2,
              },
            },
            data: convertData(item[1]),
          },
          {
            name: item[0],
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              number: 1, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 1.8, // 动画中波纹的最大缩放比例。
              brushType: "fill", // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            label: {
              show: false,
              fontSize: 0,
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: color[i],
              },
            },
            tooltip: {
              formatter: (res) => {
                const _html = `<div>${res.seriesName}</div>
            ${res.marker}
            ${res.name}
            <b style="padding-left:10px">${res.data.value[2]}</b>`;
                return _html;
              },
            },
            data: item[1].map(function (dataItem) {
              let name, value;
              if (dataItem[0].value) {
                name = dataItem[0].name;
                value = geoCoordMap[dataItem[0].name].concat([
                  dataItem[0].value,
                ]);
              } else {
                name = dataItem[1].name;
                value = geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]);
              }
              return {
                name: name,
                value: value,
              };
            }),
          }
        );
      });

      let option = {
        title: {
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          layoutCenter: ["50%", "70%"], //地图位置
          layoutSize: "118%",
          roam: true,
          itemStyle: {
            normal: {
              borderColor: "#5DA5F3",
              borderWidth: 1.5,
              shadowColor: "#5DA5F3",
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 4,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#022361", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#013F91", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              label: {
                show: false,
              },
              areaColor: "rgba(0, 255, 255, .1)",
            },
          },
          regions: [
            {
              name: "山西省",
              selected: true,
              label: {
                show: false,
                fontSize: 0,
              },
              itemStyle: {
                areaColor: "rgba(246,173,4,1)",
                color: "#ff9900",
                borderColor: "rgba(246,173,4,1)",
                borderWidth: 1,
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 0,
                },
                itemStyle: {
                  areaColor: "rgba(246,173,4,.5)",
                  borderColor: "rgba(246,173,4,1)",
                  borderWidth: 1,
                },
              },
            },
          ],
        },
        series: series,
      };

      this.$echarts.registerMap("china", { geoJSON: chinaMap });

      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.right_store {
  width: 100%;
  height: 330px;
  .store_main {
    height: calc(100% - 45px);
    width: 100%;
    display: flex;
    .btn {
      min-width: 35px;
      padding: 0 4px;
      height: 19px;
      background: linear-gradient(
        0deg,
        rgba(0, 155, 255, 0.57) 0%,
        rgba(0, 155, 255, 0) 100%
      );
      border: 1px solid #009bff;
      opacity: 0.46;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      margin-right: 10px;
      color: #009bff;
      cursor: pointer;
    }
    .active_btn {
      opacity: 1;
    }
    .title {
      color: #fff;
      font-size: 18px;
      text-align: left;
      height: 24px;
      margin: 10px 0;
      img {
        width: 15px;
        height: auto;
        margin-right: 10px;
      }
      span {
        display: inline-block;
        width: 80px;
        border-top: 1px dashed #aed0ef;
        margin: 0 20px;
        margin: 0 5px 0 20px;
        transform: translateY(-50%);
      }
    }
    .l_store {
      width: 706px;
      height: 100%;
      .top_s {
        height: 160px;
        width: 100%;
        display: flex;
        .left_s {
          width: 353px;
          height: 100%;
          .chart_1 {
            height: calc(100% - 44px);
            width: 100%;
          }
        }
        .right_s {
          width: calc(100% - 353px);
          height: 100%;
          .chart_2 {
            height: calc(100% - 44px);
            width: 100%;
          }
        }
      }
      .bottom_s {
        height: calc(100% - 160px);
        width: 100%;
        .chart_3 {
          height: calc(100% - 44px);
          width: 100%;
        }
      }
    }
    .r_store {
      width: calc(100% - 706px);
      height: 100%;
      .chart_box {
        height: calc(100% - 44px - 30px);
        width: 100%;
        position: relative;
        .chart_4 {
          width: 100%;
          height: 100%;
        }
        .rank_title {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 10;
          font-size: 12px;
          color: #e0edfe;
          .icon {
            color: #009bff;
            margin-right: 10px;
          }
        }
      }
      .rank {
        height: 30px;
        width: 100%;
        color: #e0edfe;
        font-size: 12px;
        padding-left: 24px;
        div {
          margin-right: 20px;
        }
        img {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>